<script setup>
defineOptions({
  name:"User"
})
import { getUserPage, saveUser, deleteUser, getUserDetail } from '@/api/user';
import { baseColumns } from './columns';
import editUserModal from './editUserModal.vue';
import { useFormModal,useConfirm,message } from '@/hooks/modal';
const {openModal} = useFormModal();
const {warning} = useConfirm();
const initForm = {
  id:null,
  username:"",
  nickname:"",
  email:"",
  phone:"",
  password:"",
  status:1,
  roleIds:[]
}
const configTableRef = ref(null);

const refreshTable = ()=>{
  configTableRef.value.refresh();
}
const open = (row)=>{
  openModal(editUserModal,row).then(async user=>{
    if(user){
      await saveUser(user);
      message.success('保存成功');
      refreshTable();
    }
  }).catch(()=>{
    refreshTable();
  })

}

const handleAdd = ()=>{
  open(initForm)
}
const handleEdit = ({record})=>{
  open(record)
}
const handleDelete = ({record})=>{
  warning(`确认删除用户${record.username}吗？删除后不可恢复！`).then(async ()=>{
    await deleteUser(record.id);
    message.success('删除成功');
    refreshTable();
  })
}

const columns = [
  ...baseColumns,
  {
    title: "操作",
    dataIndex: "action",
    minWidth: 150,
    actions:[
      {
        label:"编辑",
        type: 'link',
        size: 'small',
        danger:true,
        onClick:handleEdit
      },
      {
        label:"删除",
        type: 'link',
        danger:true,
        size: 'small',
        onClick:handleDelete
      }

    ]
  }
]
</script>
<template>
  <y-layout-base title="用户管理">
    <template #header>
      <a-button type="primary" @click="handleAdd">新增用户</a-button>
    </template>
    <y-config-table ref="configTableRef" :data-request="getUserPage" :page="true" :columns="columns"></y-config-table>
  </y-layout-base>
</template>
